import { IConfig, IPlugin } from 'umi-types';
import slash from 'slash2';
import * as IWebpackChainConfig from 'webpack-chain';
import defaultSettings from './defaultSettings'; // https://umijs.org/config/
import routes from './routes.config';

const { pwa } = defaultSettings;

const plugins: IPlugin[] = [
  [
    'umi-plugin-react',
    {
      antd: true,
      fastClick: true,
      dva: {
        hmr: true,
        immer: true,
      },
      locale: {
        // default false
        enable: true,
        // default zh-CN
        default: 'zh-CN',
        // default true, when it is true, will use `navigator.language` overwrite default
        baseNavigator: true,
      },
      dynamicImport: {
        loadingComponent: './components/PageLoading/index',
        webpackChunkName: true,
        level: 4,
      },
      pwa: pwa
        ? {
            workboxPluginMode: 'InjectManifest',
            workboxOptions: { importWorkboxFrom: 'local' },
          }
        : false,
      // default close dll, because issue https://github.com/ant-design/ant-design-pro/issues/4665
      // dll features https://webpack.js.org/plugins/dll-plugin/
      // dll: {
      //   include: ['dva', 'dva/router', 'dva/saga', 'dva/fetch'],
      //   exclude: ['@babel/runtime', 'netlify-lambda'],
      // },
    },
  ],
  [
    'umi-plugin-pro-block',
    {
      moveMock: false,
      moveService: false,
      modifyRequest: true,
      autoAddMenu: true,
    },
  ],
];

const chainWebpack = (config: IWebpackChainConfig) => {
  config.module
    .rule('resources-with-file')
    .test(/resources(.*)/)
    .use('resources-with-file')
    .loader('file-loader')
    .tap(options => ({ ...options, name: 'static/[name].[hash:8].[ext]' }));
};

export default {
  plugins,
  hash: true,
  history: 'hash',
  targets: { ie: 11 },
  // umi routes: https://umijs.org/zh/guide/router.html
  routes,
  // Theme for antd: https://ant.design/docs/react/customize-theme-cn
  theme: {
    'layout-header-height': '56px',
  },
  define: { ANT_DESIGN_PRO_ONLY_DO_NOT_USE_IN_YOUR_PRODUCTION: '' },
  ignoreMomentLocale: true,
  disableRedirectHoist: true,
  treeShaking: true,
  lessLoaderOptions: { javascriptEnabled: true },
  urlLoaderExcludes: [/resources(.*)/],
  cssLoaderOptions: {
    modules: true,
    getLocalIdent: (context: { resourcePath: string }, _: string, localName: string) => {
      if (
        context.resourcePath.includes('node_modules') ||
        context.resourcePath.includes('ant.design.pro.less') ||
        context.resourcePath.includes('global.less')
      ) {
        return localName;
      }
      const match = context.resourcePath.match(/src(.*)/);
      if (match && match[1]) {
        const antdProPath = match[1].replace('.less', '');
        const arr = slash(antdProPath)
          .split('/')
          .map((a: string) => a.replace(/([A-Z])/g, '-$1'))
          .map((a: string) => a.toLowerCase());
        return `antd-pro${arr.join('-')}-${localName}`.replace(/--/g, '-');
      }
      return localName;
    },
  },
  publicPath: '/chronos/',
  manifest: { basePath: '/' },
  chainWebpack,
  // proxy: {
  //   '/server/api/': {
  //     target: 'https://preview.pro.ant.design/',
  //     changeOrigin: true,
  //     pathRewrite: { '^/server': '' },
  //   },
  // },
} as IConfig;
